<template>
  <!-- Home Left Side Menu -->
  <div class="hs-side-menu">
    <el-menu
      mode="vertical"
      unique-opened
      :default-active="activePath"
      router
      :collapse="isCollapse">
        <el-submenu
          v-for="( item ) in routes"
          :key="item.id"
          :index="item.name">
          <template slot="title">
            <i v-if='item.icon' :class="'fa ' + item.icon"> </i>
            <span slot="title" >{{item.name}}</span>
          </template>

          <el-menu-item-group >
            <el-menu-item
              v-for="child in item.children"
              :key="child.id"
              :index="child.path">
              {{child.name}}
            </el-menu-item>
          </el-menu-item-group>

        </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  data () {
    return {
      activePath: ''
    }
  },
  computed: {
    ...mapGetters({
      isCollapse: 'menuCollapse',
      routes: 'routerMenu' // 'homeMenus'
    })
  },
  watch: {
    '$route' (to, from) { // 监听路由改变 转化为 router 时 只保留name
      this.activePath = to.path
      let width = window.document.body.offsetWidth
      if (width <= 720 && !this.isCollapse) {
        this.CHANGE_COLLAPSE_STATE()
      }
    }
  },
  methods: {
    ...mapActions([
      'CHANGE_COLLAPSE_STATE'
    ])
  }
}
</script>
